<template>
  <view class="page flex-col">
    <view class="box_1 flex-row">

    </view>
    <view class="group_6">
      <view class="box_8 flex-row">
        <view class="group_1 flex-col">
          <view class="group_2 flex-col"></view>
        </view>
        <view class="text-wrapper_11 flex-col" @click="loginto">
          <text class="text_3">柒</text>
          <text class="text_4">粉丝</text>
        </view>
        <view class="section_1 flex-col">
          <image class="image_2" referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng006b63c12d0e1d2ea6536956b90dc66304b6ed855662dae58f9c4127e73bcbe8" />
          <view class="text-wrapper_12 flex-row">
            <text class="text_5">888</text>
            <text class="text_6">评论</text>
            <text class="text_7">22</text>
          </view>
        </view>
      </view>
      <view class="box_9 flex-row justify-between">
        <view class="group_4 flex-col" @click="cardPackageto">
          <view class="box_10 flex-row  ">
            <image class="label_1" referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng21f2745a4844e738c0fec685d5b2063523edfccada12a4f6d666f5119167d67a" />
            <view class="image-text_7 flex-row justify-between">
              <text class="text-group_1">卡包</text>
              <image class="thumbnail_3" referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng471fc62424397dab69fed0977f0b93422bdad63541c3ecd8cf320b78f49f8fca" />
            </view>
          </view>
          <view class="text-wrapper_4">
            <text class="text_8">总资产：</text>
            <text class="text_9">7898.99</text>
            <text class="text_10">（元）</text>
          </view>
        </view>
        <view class="group_5 flex-col">
          <view class="text-wrapper_13 flex-row justify-between">
            <text class="text_11">优惠券</text>
            <text class="text_12">&gt;</text>
          </view>
          <view class="image-wrapper_4 flex-row">
            <image class="image_3" referrerpolicy="no-referrer" :src="item.lanhuimage0"
              v-for="(item, index) in loopData0" :key="index" />
          </view>
        </view>
      </view>
      <view class="list_2 flex-col">
        <view class="list-items_1 flex-col" v-for="(item, index) in loopData1" :key="index">
          <text class="text_13" v-html="item.lanhutext0"></text>
          <view class="group_7 flex-row justify-between">
            <view class="text-wrapper_6 flex-col">
              <text class="text_14" :style="{ color: item.lanhufontColor1 }" v-html="item.lanhutext1"></text>
            </view>
            <view class="text-wrapper_7 flex-col">
              <text class="text_15" :style="{ color: item.lanhufontColor2 }" v-html="item.lanhutext2"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="text-wrapper_8 flex-col">
        <text class="text_16">连接设备管理</text>
      </view>
      <view class="text-wrapper_9 flex-col">
        <text class="text_17">退出登录</text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        loopData0: [{
            lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2e65b28c9128746279aae5c6e2a5a68a9cc1722222c8272cd69336afe93b599',
          },
          {
            lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2e65b28c9128746279aae5c6e2a5a68a9cc1722222c8272cd69336afe93b599',
          },
          {
            lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2e65b28c9128746279aae5c6e2a5a68a9cc1722222c8272cd69336afe93b599',
          },
        ],
        loopData1: [{
            lanhutext0: '广告管理',
            lanhutext1: '参与计划',
            lanhufontColor1: 'rgba(0,0,0,1)',
            lanhutext2: '管理',
            lanhufontColor2: 'rgba(0,0,0,1)',
          },
          {
            lanhutext0: '保单计划',
            lanhutext1: '立即参与',
            lanhufontColor1: 'rgba(254,54,54,1)',
            lanhutext2: '计划中心',
            lanhufontColor2: 'rgba(6,61,255,1)',
          },
        ],
        constants: {},
      };
    },
    methods: {
      cardPackageto() {
        uni.navigateTo({
          url: "/pages/cardPackage/index"
        })
      },
      loginto() {
        uni.navigateTo({
          url: "/pages/login/index"
        })
      }
    },
  };
</script>
<style lang="scss">
  .page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    // height: 812px;
    overflow: hidden;
    padding-bottom: 200rpx;

    .box_1 {
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba7ab85c8980c04d1f31b574b75158ae2d0c43f19008554131ec29096f5cf5c3) 100% no-repeat;
      background-size: 100% 100%;
      padding: 16px 13px 55px 22px;

      .text-wrapper_10 {
        width: 54px;
        height: 17px;
        overflow-wrap: break-word;
        font-size: 0;
        letter-spacing: -0.2800000011920929px;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: normal;
        text-align: right;
        white-space: nowrap;
        line-height: 17px;

        .text_18 {
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 17px;
        }

        .text_19 {
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 17px;
        }
      }

      .thumbnail_4 {
        width: 17px;
        height: 11px;
        margin: 3px 0 3px 219px;
      }

      .thumbnail_5 {
        width: 15px;
        height: 11px;
        margin: 2px 0 4px 5px;
      }

      .image_5 {
        width: 25px;
        height: 12px;
        margin: 2px 0 3px 5px;
      }
    }

    .group_6 {
      padding-top: 1px;
      padding: 0 28rpx;

      .box_8 {
        margin: 0 182px 0 22px;

        .group_1 {
          box-shadow: 0px 1px 4px 0px rgba(255, 185, 137, 1);
          margin-top: 1px;

          .group_2 {
            border-radius: 50%;
            background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4b7d67b2e3c84ba5af33992932d560af_mergeImage.png);
            width: 58px;
            height: 58px;
            border: 1px solid rgba(151, 151, 151, 1);
          }
        }

        .text-wrapper_11 {
          margin: 0 0 11px 12px;

          .text_3 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 18px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: justify;
            white-space: nowrap;
            line-height: 25px;
            margin-right: 6px;
          }

          .text_4 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 12px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: justify;
            white-space: nowrap;
            line-height: 17px;
            margin-top: 6px;
          }
        }

        .section_1 {
          margin: 6px 0 11px 4px;

          .image_2 {
            width: 72px;
            height: 17px;
            margin-right: 1px;
          }

          .text-wrapper_12 {
            margin-top: 8px;

            .text_5 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 12px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 17px;
            }

            .text_6 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 12px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 17px;
              margin-left: 8px;
            }

            .text_7 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 12px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 17px;
              margin-left: 4px;
            }
          }
        }
      }

      .box_9 {
        margin-top: 40rpx;

        .group_4 {
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng65814e96503ec6384090214e3c2b1eda90a0db5937f170b9491de6ef0d85e0a6) 100% no-repeat;
          background-size: 100% 100%;
          padding: 11px 9px 13px 12px;

          .box_10 {
            width: 91px;
            margin-right: 41px;

            .label_1 {
              width: 29px;
              height: 25px;
            }

            .image-text_7 {
              width: 56px;

              .text-group_1 {
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 18px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: justify;
                white-space: nowrap;
                line-height: 25px;
              }

              .thumbnail_3 {
                width: 14px;
                height: 10px;
                margin: 6px 0 9px 0;
              }
            }
          }

          .text-wrapper_4 {
            width: 132px;
            height: 22px;
            overflow-wrap: break-word;
            font-size: 0;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: justify;
            line-height: 14px;
            margin-top: 27px;

            .text_8 {
              height: 22px;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              line-height: 14px;
            }

            .text_9 {
              height: 22px;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 16px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              line-height: 14px;
            }

            .text_10 {
              height: 22px;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              line-height: 14px;
            }
          }
        }

        .group_5 {

          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3b9f6cb03b709485a486bcf1e44ba1779003c9b77ecd71333bfa49a16007f3a8) 100% no-repeat;
          background-size: 100% 100%;
          padding: 22rpx 18rpx 26rpx 24rpx;

          .text-wrapper_13 {
            width: 172px;
            margin-right: 4px;

            .text_11 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 18px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 25px;
              margin-top: 1px;
            }

            .text_12 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 20px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 28px;
            }
          }

          .image-wrapper_4 {
            width: 176px;
            height: 48px;
            margin-top: 4px;
            justify-content: space-between;

            .image_3 {
              width: 52px;
              height: 48px;
              margin-right: 10px;
            }
          }
        }
      }

      .list_2 {
        height: 208px;
        align-self: center;
        margin-top: 12px;

        .list-items_1 {
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng24cbe8fd012a1015841a0dd7dfe9b55117d4e930c85547e908c2f8898ef3eece) 100% no-repeat;
          background-size: 100% 100%;
          padding-top: 6px;
          margin: 0 1px 12px 0;

          .text_13 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 20px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: justify;
            white-space: nowrap;
            line-height: 28px;
            align-self: center;
          }

          .group_7 {
            width: 346px;
            margin-top: 8px;

            .text-wrapper_6 {
              background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge7ec291960077ac5742351c60fca4542f03d94339d27f88d7a1ded0a4533a128) 100% no-repeat;
              background-size: 100% 100%;
              padding: 14px 46px 14px 46px;

              .text_14 {
                overflow-wrap: break-word;
                font-size: 20px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: justify;
                white-space: nowrap;
                line-height: 28px;
              }
            }

            .text-wrapper_7 {
              background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8f003c24ccab4e8ce449850149e762c072494ca9882d5f272c447d1f16a0bf0f) 100% no-repeat;
              background-size: 100% 100%;
              padding: 14px 66px 14px 66px;

              .text_15 {
                width: 80px;
                overflow-wrap: break-word;
                font-size: 20px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: justify;
                white-space: nowrap;
                line-height: 28px;
              }
            }
          }
        }
      }

      .text-wrapper_8 {
        // width: 692rpx;
        height: 92rpx;
        background: linear-gradient(312deg, #6A7BE6 0%, #A2B1FF 100%);
        border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 24rpx;

        .text_16 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: justify;
          white-space: nowrap;
          line-height: 28px;
        }
      }

      .text-wrapper_9 {
        // width: 692rpx;
        height: 80rpx;
        background: #FD7F38;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 24rpx;

        .text_17 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: justify;
          white-space: nowrap;
          line-height: 28px;
        }
      }

      .box_6 {
        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngad48d89b4c0f059fd07e1be21605763122cea5e994adb08d9be07a8b76f05d75) 100% no-repeat;
        background-size: 100% 100%;
        margin-top: 112px;
        padding: 13px 18px 10px 26px;

        .box_11 {
          .image-text_8 {
            margin-top: 33px;

            .label_2 {
              width: 24px;
              height: 25px;
            }

            .text-group_2 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 14px;
              align-self: center;
              margin-top: 2px;
            }
          }

          .image-text_9 {
            margin: 33px 0 0 50px;

            .label_3 {
              width: 26px;
              height: 25px;
            }

            .text-group_3 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 14px;
              align-self: center;
              margin-top: 2px;
            }
          }

          .image-text_10 {
            margin-left: 34px;

            .image-wrapper_2 {
              background-color: rgba(253, 127, 56, 1);
              border-radius: 27px;
              padding: 13px 12px 12px 13px;

              .label_4 {
                width: 32px;
                height: 32px;
              }
            }

            .text-group_4 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 14px;
              margin: 3px 19px 0 18px;
            }
          }

          .image-text_11 {
            margin: 34px 0 0 34px;

            .label_5 {
              width: 24px;
              height: 24px;
            }

            .text-group_5 {
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: justify;
              white-space: nowrap;
              line-height: 14px;
              margin: 2px 1px 0 3px;
            }
          }

          .image-text_12 {
            margin: 34px 0 0 42px;

            .label_6 {
              width: 24px;
              height: 24px;
              align-self: center;
            }

            .text-group_6 {
              overflow-wrap: break-word;
              color: rgba(255, 187, 79, 1);
              font-size: 10px;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: justify;
              white-space: nowrap;
              line-height: 14px;
              margin-top: 2px;
            }
          }
        }

        .image-wrapper_5 {
          margin: 9px 102px 0 95px;

          .image_6 {
            width: 134px;
            height: 5px;
          }
        }
      }
    }
  }
</style>